import { useTranslation } from "react-i18next";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import PasswordInput from "@/components/custom-ui/password-input";
import { Key, Info } from "lucide-react";
import type { UseFormReturn } from "react-hook-form";
import type { PasswordFormData } from "@/schemas/profile";

interface PasswordChangeProps {
  passwordForm: UseFormReturn<PasswordFormData>;
  onSavePassword: (data: PasswordFormData) => void;
  hasPassword?: boolean;
}

export function PasswordChange({
  passwordForm,
  onSavePassword,
  hasPassword = true,
}: PasswordChangeProps) {
  const { t } = useTranslation();

  return (
    <div className="space-y-4 py-6 border-y border-gray-200">
      {!hasPassword && (
        <div className="bg-blue-50 border border-blue-200 rounded-md p-3 flex items-start gap-2">
          <Info className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
          <div className="text-sm text-blue-800">
            {t("You are setting a password for the first time. This will allow you to login with your email and password in the future.", {
              defaultValue: "You are setting a password for the first time. This will allow you to login with your email and password in the future."
            })}
          </div>
        </div>
      )}
      
      <Form {...passwordForm}>
        <form
          onSubmit={passwordForm.handleSubmit(onSavePassword)}
          className="space-y-3"
        >
          {hasPassword && (
            <FormField
              control={passwordForm.control}
              name="current_password"
              render={({ field }) => (
                <FormItem>
                  <div className="grid grid-cols-3 gap-4 items-center h-10">
                    <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                      <Key className="w-4 h-4" />
                      {t("Current Password", { defaultValue: "Current Password" })}:
                    </FormLabel>
                    <div className="col-span-2 w-full h-full flex items-center">
                      <FormControl>
                        <PasswordInput
                          placeholder={t("Current Password", {
                            defaultValue: "Current Password",
                          })}
                          {...field}
                          className="h-10 w-full"
                        />
                      </FormControl>
                    </div>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
          )}
          <FormField
            control={passwordForm.control}
            name="new_password"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <Key className="w-4 h-4" />
                    {t("New Password", { defaultValue: "New Password" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center">
                    <FormControl>
                      <PasswordInput
                        placeholder={t("New Password", {
                          defaultValue: "New Password",
                        })}
                        {...field}
                        className="h-10 w-full"
                      />
                    </FormControl>
                  </div>
                </div>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={passwordForm.control}
            name="confirm_password"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <Key className="w-4 h-4" />
                    {t("Confirm Password", { defaultValue: "Confirm Password" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center">
                    <FormControl>
                      <PasswordInput
                        placeholder={t("Confirm Password", {
                          defaultValue: "Confirm Password",
                        })}
                        {...field}
                        className="h-10 w-full"
                      />
                    </FormControl>
                  </div>
                </div>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </div>
  );
}
